<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color:white;
        }
        #top{
            position: relative;
            height: 110px;
        }
        #top img{
            position: absolute;
            top: 20px;
            left: 80px;
        }
        #top_right{
            position: absolute;
            top: 50px;
            left:1155px;
        }
        #top_right a{
            padding:10px;
            font-size: 14px;
            text-decoration: none;
            color: #333;
        }
        #top_right a:hover{
            color: #40a9ff;
        }
        #content{
            position: relative;
            height:500px;
            background: url("static/img/login_bg.jpg") no-repeat;
        }
        #login{
            background-color:white;
            height: 380px;
            width:360px;
            position:relative;
            top:50px;
            left:920px;
            box-shadow:2px 5px 10px #d3d3d3;

        }
        #login_top{
            width:100%;
            heigth:50px;
            border-bottom:1px solid black;
            font-size: 20px;
        }
        .select{
            background-color: #1d1a35;
            color: white;
        }
        #login_by_account{
            display: inline-block;
            width: 50%;
            height:50px;
            position: relative;
            line-height:50px;
            text-align: center;
            cursor: pointer;

        }
        #login_by_sweep_code{
            display: inline-block;
            position: absolute;
            width: 50%;
            top:0;
            right: 0;
            height:50px;
            line-height:50px;
            text-align: center;
            cursor: pointer;
        }
        #login_input{
            position: relative;
            left:15%;
            top:10%;
            /*border: 1px solid black;*/
            height:250px;
            width: 250px;
        }
        #input_user,#input_pwd,#input_code,#do_text{
            position: relative;
            /*border: 1px solid black;*/
            height: 50px;
            width: 100%;
            font-size: 14px;
            color: #666666;
        }
        #input_code #code_img{
            cursor: pointer;
            position: relative;
            margin-top: 35px;
            margin-left: 70px;
            padding-left: 5px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 85px;
            color: #f9eb3f;
            font-size: 32px;
            font-family: "Microsoft JhengHei";
            background-color: #9fa0a0;
        }
        #input_user img,#input_pwd img,#input_code img{
            display: inline-block;
            height: 80%;
            margin: 5px;
        }
        #input_user input,#input_pwd input,#input_code div{
            display: inline-block;
            position: relative;
            top: -90%;
            left:20%;
            width: 80%;
            height: 80%;
        }
        #input_code div input{
            position: absolute;
            height: 100%;
            width:50%;
        }
        #input_code div img{
            position: absolute;
            height: 100%;
            margin: 0 2px;
            right:0;
        }
        #do_text input{
            margin: 5px;
        }
        #register{
            position: relative;
            left:10px;
            text-decoration: none;
            color: black;
        }
        #register:hover{
            color:#5daeff;
        }
        #forget_pwd{
            position: absolute;
            right: 0;
            top:5px;
            text-decoration: none;
            color: #5daeff;
        }
        #login_input button{
            width: 100%;
            height: 40px;
            border: 0;
            color: white;
            font-size: 20px;
            background-color: #40a8ff;
        }
        #login_input button:hover{
            cursor: pointer;
        }
        #login_input input{
            background-color: #e6e6e6;
            border: 0;
        }
        #footer{
            position: relative;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            color: #666666;
        }
        .show{
            display: block;
        }
        .hidden{
            display: none;
        }
    </style>
    <script src="jQuery/jquery-1.11.3.js"></script>
    <script src="js/login.js"></script>
    <script type="text/javascript">
        function change(n) {
            var account=document.getElementById("login_by_account");
            var code=document.getElementById("login_by_sweep_code");
            if(n==account){
                account.setAttribute("class","select");
                code.removeAttribute("class");
                document.getElementById("form_way").className="show";
                document.getElementById("code_way").className="hidden"

            }else{
                code.setAttribute("class","select");
                account.removeAttribute("class");
                document.getElementById("form_way").className="hidden";
                document.getElementById("code_way").className="show"
            }
        }

    </script>
<body>
<div>
    <div id="top">
        <img src="static/img/logo.png" alt="图片无法加载">
        <div id="top_right">
            <a href="home.jsp">首页</a>|<a href="feedback.jsp">意见反馈</a>
        </div>
    </div>
    <div id="content">
        <div id="login">
            <%-- 登录顶部--%>
            <div id="login_top">
                <div id="login_by_account" class="select" onclick="change(this)">账户登录</div>
                <div id="login_by_sweep_code" onclick="change(this)">扫码登录</div>
            </div>
            <%-- 登录框--%>
            <div  id="login_input">
                <form action="login.do" method="post" id="form_way">
                    <%-- 用户名--%>
                    <div id="input_user">
                        <img src="static/img/user.jpg"><input name="account" type="text">
                    </div>
                    <%-- 密码 --%>
                    <div id="input_pwd">
                        <img src="static/img/pwd.jpg"><input name="password" type="password">
                    </div>
                    <%-- 验证码 --%>
                    <div id="input_code">
                        <%

                        %>
                        <img src="static/img/code.jpg">
                        <%--<img src="static/img/num.jpg">--%>
                        <div><input name="code" type="text" id="code"><div id="code_img" >1231</div></div>
                    </div>
                    <%-- 记住密码，注册  忘记密码--%>
                    <div id="do_text">
                        <input name="check" type="checkbox">记住密码
                        <a href="register.jsp" id="register">注册</a>
                        <a href="#" id="forget_pwd">忘记密码</a>
                    </div>
                    <%-- 登录按钮 --%>
                    <%
                        String str = request.getParameter("error");
                        int error=0;
                        if(str!=null){
                            try{
                                error=Integer.valueOf(str);
                            }catch (Exception e){}
                            if(error==1){
                    %>
                        <span style="color: red;font-size: 14px;">账号或密码错误！请重新输入！</span>
                    <%
                            }else if(error==2){
                    %>
                        <span style="color: red;font-size: 14px;">验证码错误！请重新输入！</span>
                    <%
                            }else{
                    %>
                        <span style="color: red;font-size: 14px;">请求出错，请重新输入！</span>
                    <%
                            }
                        }
                    %>
                    <button type="submit" id="login_btn">登录</button>
                </form>
                <div id="code_way" class="hidden" style="margin-left: auto;margin-right: auto">
                    <img src='static/img/swep_code.jpg' style="margin: 20px 35px">
                    <p style="font-size: 13px;text-align: center">打开手机微信客户端右上角+，扫描二维码</p>
                </div>

            </div>

        </div>
    </div>
    <div id="footer">
        中国微课慕课网 版权所有@2015 Tel:010-8345-6666 京ICP备09025234号
    </div>
</div>
</body>
</html>
